<template>
  <div ref="imageWrapper">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="onSearch">
        <a-row :gutter="24">
          <a-col :md="8" :sm="24">
            <a-form-model-item label="选择机构">
              <j-select-depart
                v-model="queryParam.deptId"
                :trigger-change="true"
                customReturnField="id"
                :multi="false"
              ></j-select-depart>
            </a-form-model-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <a-form-model-item label="选择报告期">
              <a-row>
                <a-col span="6">
                  <a-select v-model="reportPeriod" placeholder="请选择报告期" labelInValue @select="selectReport">
                    <a-select-option v-for="item in reportPeriods" :value="item.value || ''" :key="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col span="18">
                  <div class="h-line" v-show="switchOpen.isYear"></div>
                  <a-select v-show="switchOpen.isYear" placeholder="请选择年度" v-model="bgq.year" style="width: 120px">
                    <a-select-option v-for="(item, index) in years" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.ismonth"></div>
                  <a-select v-show="switchOpen.ismonth" placeholder="请选择月" v-model="bgq.month" style="width: 120px">
                    <a-select-option v-for="(item, index) in months" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.isday"></div>
                  <a-select v-show="switchOpen.isday" placeholder="请选择日" v-model="bgq.day" style="width: 120px">
                    <a-select-option v-for="(item, index) in days" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.isweek"></div>
                  <a-select v-show="switchOpen.isweek" placeholder="请选择周" v-model="bgq.week" style="width: 120px">
                    <a-select-option v-for="(item, index) in weeks" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.isquarter"></div>
                  <a-select
                    v-show="switchOpen.isquarter"
                    placeholder="请选择季报"
                    v-model="bgq.quarter"
                    style="width: 120px"
                  >
                    <a-select-option v-for="(item, index) in quarters" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.iscount"></div>
                  <a-select
                    v-show="switchOpen.iscount"
                    placeholder="请选择次数"
                    v-model="bgq.count"
                    style="width: 120px"
                  >
                    <a-select-option v-for="(item, index) in counts" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                  <div class="h-line" v-show="switchOpen.ismidYear"></div>
                  <a-select
                    v-show="switchOpen.ismidYear"
                    placeholder="请选择半年报"
                    v-model="bgq.midYear"
                    style="width: 120px"
                  >
                    <a-select-option v-for="(item, index) in midYears" :key="index" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="选择报表">
              <a-select v-model="queryParam.tableId" placeholder="请选择选择报表">
                <a-select-option
                  v-for="item in queryDict"
                  :value="item.tableId || ''"
                  :label="item.tableName"
                  :key="item.tableId"
                >
                  {{ item.tableName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="18" offset="8">
            <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="onSearch" class="yellow_search_btn">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :pagination="ipagination"
      :loading="loading"
      size="middle"
      class="antableClass"
      rowKey="id"
      :scroll="{ y: 300, x: 4500 }"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <template slot="title">
        <div>
          <span>财务指标表</span><span v-show="subTitle">（{{ subTitle }}）</span>
        </div>
        <div>
          <a-button style="margin-bottom: 5px" @click="download" :loading="loading">导出</a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction,downFile} from '@/api/manage'
  import {columns1, columns2, columns3} from './columns'

  export default {
    name: 'DataDetial',
    mixins: [JeecgListMixin],
    data() {
      return {
        queryParam: {
          deptId: '',
          bgq: '',
          tableId: '',
          reportPeriod: '',
          reportCategoryId: '',
        },
        columns: [],
        queryDict: [],
        bgq: {
          year: '',
          month: '',
          day: '',
          quarter: '',
          count: '',
          week: '',
          midYear: '',
        },
        years: [2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015],
        months: ['01', '02', '03', '04', '05', '06', '07', '08', ' 09', '10', '11', '12'],
        weeks: [1, 2, 3, 4, 5],
        days: [
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
          '24',
          '25',
          '26',
          '27',
          '28',
          '29',
          '30',
          '31',
        ],
        midYears: ['上半年', '下半年'],
        quarters: ['第一季度', '第二季度', '第三季度', '第四季度'],
        counts: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次'],
        reportPeriods: [],
        url: {
          list: '/sjcj/dataCollection/queryTableDataList',
          queryDict: '/sjcj/dataCollection/queryDict',
          export: '/sjcj/dataCollection/exportXls',
          export1: '/sjcj/dataCollection/export',
          reportPeriod: '/sys/dict/getDictItems/template_report_type',
        },
        switchOpen: {
          isYear: false,
          ismonth: false,
          isweek: false,
          isday: false,
          iscount: false,
          isquarter: false,
          ismidYear: false,
        },
        // 报告期
        Sublabel: '',
        // 副标题
        subTitle: '',
        loading: false,
        disableMixinCreated: true,
      }
    },
    created() {
      // 请求报表下拉
      this.getqueryDict()
      // 请求报表下拉
      this.getreportPeriod()
    },
    watch: {
      'queryParam.tableId'(val) {
        this.selectqueryDict(val)
      },
    },
    computed: {
      reportPeriod: {
        get() {
          return {key: this.queryParam.reportPeriod}
        },
        set({key, label}) {
          this.queryParam.reportPeriod = key
        },
      },
    },
    methods: {
      // 报表切换
      selectqueryDict(key) {
        this.dataSource = [];
        this.ipagination.total = 0;
        this.ipagination.current = 1;
        switch (key) {
          case 'intel_data_follow_up':
            //跟投情况基本指标
            this.columns = columns1()
            break
          case 'intel_data_follow_up_bt':
            //BT情况表
            this.columns = columns2()
            break
          case 'intel_data_follow_up_nobt':
            //PPP、BOT项目情况表
            this.columns = columns3()
            break
          default:
            this.columns = []
        }
      },
      selectReport({key: value, label}) {
        label && (this.Sublabel = label.match(/[\u4e00-\u9fa5]+/g)[0])
        let {bgq} = this
        let str = ''
        switch (value) {
          case '0':
            // 专项审计
            this.switchOpen = {
              isYear: true,
              ismonth: false,
              isweek: false,
              isday: false,
              iscount: true,
              isquarter: false,
              ismidYear: false,
            }
            str = bgq.year + '-' + bgq.count
            return str
          case '1':
            // 日报
            this.switchOpen = {
              isYear: true,
              ismonth: true,
              isweek: false,
              isday: true,
              iscount: false,
              isquarter: false,
              ismidYear: false,
            }
            str = bgq.year + '-' + bgq.month + '-' + bgq.day
            return str
          case '2':
            // 周报
            this.switchOpen = {
              isYear: true,
              ismonth: true,
              isweek: true,
              isday: false,
              iscount: false,
              isquarter: false,
              ismidYear: false,
            }
            str = bgq.year + '-' + bgq.month + '-' + bgq.week
            return str
          case '3':
            // 月报
            this.switchOpen = {
              isYear: true,
              ismonth: true,
              isweek: false,
              isday: false,
              iscount: false,
              isquarter: false,
              ismidYear: false,
            }
            str = bgq.year + '-' + bgq.month
            return str
          case '4':
            // 季报
            this.switchOpen = {
              isYear: true,
              ismonth: false,
              isweek: false,
              isday: false,
              iscount: false,
              isquarter: true,
              ismidYear: false,
            }
            str = bgq.year + '-' + bgq.quarter
            return str
          case '5':
            //半年报
            this.switchOpen = {
              isYear: true,
              ismonth: false,
              isweek: false,
              isday: false,
              iscount: false,
              isquarter: false,
              ismidYear: true,
            }
            str = bgq.year + '-' + bgq.midYear
            return str
          case '6':
            // 年报
            this.switchOpen = {
              isYear: true,
              ismonth: false,
              isweek: false,
              isday: false,
              iscount: false,
              isquarter: false,
              ismidYear: false,
            }
            str = bgq.year
            return str
          default:
            return str
        }
      },
      edit(record) {
        this.queryParam.tableId = record.tableId
        this.queryParam.reportCategoryId = record.reportCategoryId
      },
      onSearch() {
        this.queryParam.bgq = this.selectReport({key: this.queryParam.reportPeriod})
        this.subTitle = this.Sublabel + '-' + this.queryParam.bgq
        this.loadData()
      },
      download() {
        this.queryParam.bgq = this.selectReport({key: this.queryParam.reportPeriod})
        this.loading = true
        let fileName = this.subTitle
        downFile(this.url.export, this.queryParam).then((data) => {
          this.loading = false
          if (!data) {
            this.$message.warning('文件下载失败')
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
          } else {
            const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })


        // getAction(this.url.export1, this.queryParam).then((res) => {
        //   this.loading = false
        //   if (res.success && res.result) {
        //     this.$message.success('正在下载，请稍等！')
        //     let url = `${window._CONFIG['domianURL']}/sys/common/static/${res.result.path}`
        //     window.open(url, '_blank')
        //   }
        // })

        // this.queryParam.bgq = this.selectReport({key: this.queryParam.reportPeriod})
        // let paramStr = this.getparamStr(this.queryParam)
        // this.$message.success('正在下载，请稍等！')
        // let url = `${window._CONFIG['domianURL']}/sjcj/dataCollection/exportXls?${paramStr}`
        // window.open(url, '_blank')
      },
      getparamStr(param) {
        let str = ''
        Object.keys(param).forEach((key) => {
          str += `${key}=${this.queryParam[key]}&`
        })
        return str
      },
      getqueryDict() {
        getAction(this.url.queryDict).then((res) => {
          if (res.success) {
            this.queryDict = res.result
          }
        })
      },
      getreportPeriod() {
        getAction(this.url.reportPeriod, null).then((res) => {
          if (res.success) {
            this.reportPeriods = res.result
          } else {
            console.log(res)
          }
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/tableTheme.less';

  /deep/ .ant-table-title {
    border: none !important;
    display: flex;
    justify-content: space-between;
    padding: 0px 0px !important;

    div {
      span {
        color: #2e4cba;
      }

      span:first-child {
        font-size: 15px;
        font-weight: 600;
      }

      span:last-child {
        font-size: 12px;
      }
    }
  }

  .h-line {
    display: inline-block;
    width: 7px;
    height: 1px;
    border-top: 1px solid gray;
    margin: 5px 3px;
  }
</style>